{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>学习预警</title>
<style type="text/css">
    .mui-bar~.mui-content .mui-fullscreen {
        top: 44px;
        height: auto;
    }
    .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
    }
    .mui-bar~.mui-pull-top-tips {
        top: 24px;
    }
    .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
    }
    .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }
    .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;*/

        margin: 0;
    }
    .mui-pull-top-wrapper .mui-icon,
    .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
    }
    .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
    }
    .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
    }
    .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    .mui-pull-top-canvas canvas {
        width: 40px;
    }
    .mui-slider-indicator.mui-segmented-control {
        background-color: #fff;
    }
    .mui-segmented-control.mui-scroll-wrapper{ height: 42px; width: 100% !important;}
    .mui-segmented-control.mui-scroll-wrapper .mui-scroll{ height: 42px;}
    .mui-segmented-control.mui-scroll-wrapper .mui-control-item{ padding: 0 25px;}
    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{ border-bottom: 2px solid #FF6E3B !important;}
    .mui-segmented-control .mui-control-item{ line-height: 40px;}
    .mui-fullscreen .mui-segmented-control~.mui-slider-group{ top: 43px;}
    .mui-table-view-cell{ padding: 0;}
    .bbs-user-top .bbs-user-info .bbs-interaction-btn{ margin-top: 16px;}
    .bbs-user-top .bbs-user-info .mb-nick-name{ margin-top: 0;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--班级选项-->
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted xw-border-bottom1">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    一年二班
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    一年三班
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    二年一班
                </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll wn-list">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <div class="bbs-user-top">
                                    <div class="bbs-user-info mui-clearfix">
                                        <img class="bbs-user-photo mui-pull-left" src="images/bbs-logo@2x.png">
                                        <div class="mb-nick-name mui-pull-left">
                                            <b class="mb-nickname mui-ellipsis">陈大超</b>
                                            <p class="mb-arr-time"><span>平均错题率10%</span><span>最近1周平均错题率是50% <i class="iconfont icon-up"></i></span><input class="warning-set" type="button"  value="预警设置" onclick="location.href='warning-setting.html'" /></p>
                                        </div>
                                        <span class="bbs-interaction-btn mui-pull-right"><input type="button" name="cancel" id="" value="发送预警" onClick="location.href='warning-cont.html'"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll wn-list">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <div class="bbs-user-top">
                                    <a class="bbs-user-info mui-clearfix" href="#">
                                        <img class="bbs-user-photo mui-pull-left" src="images/bbs-logo@2x.png">
                                        <div class="mb-nick-name mui-pull-left">
                                            <b class="mb-nickname mui-ellipsis">陈大超</b>
                                            <p class="mb-arr-time"><span>平均错题率10%</span><span>最近1周平均错题率是50% <i class="iconfont icon-up"></i></span><input class="warning-set" type="button" name="" id="" value="预警设置" onclick="location.href='warning-setting.html'" />
                                            </p>
                                        </div>
                                        <span class="bbs-interaction-btn mui-pull-right"><input type="button" name="cancel" id="" value="发送预警"></span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll wn-list">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <div class="bbs-user-top">
                                    <a class="bbs-user-info mui-clearfix" href="#">
                                        <img class="bbs-user-photo mui-pull-left" src="images/bbs-logo@2x.png">
                                        <div class="mb-nick-name mui-pull-left">
                                            <b class="mb-nickname mui-ellipsis">陈大超</b>
                                            <p class="mb-arr-time"><span>平均错题率10%</span><span>最近1周平均错题率是50% <i class="iconfont icon-up"></i></span><input class="warning-set" type="button" name="" id="" value="预警设置" onclick="location.href='warning-setting.html'" /></p>
                                        </div>
                                        <span class="bbs-interaction-btn mui-pull-right"><input type="button" name="cancel" id="" value="发送预警"></span>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    (function($) {
        //阻尼系数
        var deceleration = mui.os.ios?0.003:0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration:deceleration
        });
        $.ready(function() {
            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    down: {
                        callback: function() {
                            var self = this;
                            setTimeout(function() {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.insertBefore(createFragment(ul, index, 1, true), ul.firstChild);
                                self.endPullDownToRefresh();
                            }, 1000);
                        }
                    },
                    up: {
                        callback: function() {
                            var self = this;
                            setTimeout(function() {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.appendChild(createFragment(ul, index, 1));
                                self.endPullUpToRefresh();
                            }, 1000);
                        }
                    }
                });
            });
            var createFragment = function(ul, index, count, reverse) {
                var length = ul.querySelectorAll('li').length;
                var fragment = document.createDocumentFragment();
                var li;
                for (var i = 0; i < count; i++) {
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '<li class="mui-table-view-cell"><div class="bbs-user-top"><a class="bbs-user-info mui-clearfix" href="#"><img class="bbs-user-photo mui-pull-left" src="images/bbs-logo@2x.png"><div class="mb-nick-name mui-pull-left"><b class="mb-nickname mui-ellipsis">陈大超</b><p class="mb-arr-time"><span>平均错题率10%</span><span>最近1周平均错题率是50% <i class="iconfont icon-up"></i></span><input class="warning-set" type="button" name="" id="" value="预警设置" onclick="location.href=\'warning-setting.html\'" /></p></div><span class="bbs-interaction-btn mui-pull-right"><input type="button" name="cancel" id="" value="发送预警" onClick="location.href=\'warning-cont.html\'"></span></a></div></li>';
                    fragment.appendChild(li);
                }
                return fragment;
            };
        });
    })(mui);
</script>
<!--flotdemo-->
{% endblock %}
